<template>
  <v-box :title="'首页'" >
    <view class="tbox">
      <v-center :row="true" style="
        min-height: 70px;
        height: auto;
        background: #f8f8f8;
        padding: 0;
      ">
        <template #head>
            <view>
              <span style="margin:0 19px">系统名称</span>
              <input class="inp" value="南京十方网络科技有限公司防攻击网关" 
                style="pointer-events: none;outline: none"/>
            </view>
        </template>
        <template #center>
          <view>
            
          </view>
        </template>
        <template #end >
          <view style="width:200px;
          background: #EEEEEE;
          height: 70px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          color: #1F1F1F;
          text-align: center;
          line-height: 70px;"
          ><icon :icon="['fas', 'network-wired']"></icon>
            <span >{{online=="YES" ? " 在线" : ' 离线'}}</span>
          </view>
        </template>
      </v-center>
      <view class="info_main">
        <view class="info" v-if="Dtype !=2 "><span>用户姓名</span><p>{{UInfo.uname}}</p></view>
        <view class="info" v-if=" Dtype !=2"><span>工号</span><p>{{UInfo.number?UInfo.number:'--'}}</p></view>
        <view class="info"><span>所属单位</span><p>{{UInfo.uint?UInfo.uint: '--'}}</p></view>
        <view class="info"><span>所属部门</span><p>{{UInfo.part?UInfo.part: '--'}}</p></view>
        <view class="info"><span>电话</span><p>{{UInfo.phone?UInfo.phone: '--'}}</p></view>
        <view class="info"><span>备注</span><p>{{UInfo.mark?UInfo.mark: '--'}}</p></view>
      </view>
    </view>

  </v-box>
</template>
<script>
import VBox from "@/components/scraw/VBox.vue";
import VCenter from "@/components/scraw/VCenter.vue";
import { getCurrentInstance } from "vue"
export default {
  components: {
    VBox,
    VCenter,
  },
  data(){
    return {
      online:''
    }
  },
  mounted(){
    this.$default_hloading.isload = false
    this.$default_hloading.istips = false
    this.$http.get("getStatus").then(res=>{
      this.online = res.data.msg 
    })
  },
  setup() {
    var {proxy : cthis} = getCurrentInstance()
    return {
        UInfo: cthis.$userInfo.UINFO,
        Dtype: cthis.$userInfo.DTYPE
    }
  },
};
</script>

<style scoped>
  .tbox {
    height: 70px;
  }
  .inp{
    width: 508px;
    height: 38px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    padding-left: 28px;
  }
  .info_main{
    display: flex;
    flex-wrap:wrap;
    align-content:space-around;
    padding-left: 40px;
    margin-top: 28px;
    background: #F8F8F8;
    border-radius: 8px;
    border-top:8px solid #2D9386;
  }
  .info_main > .info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 220px;
    min-height: 58px;
    margin: 30px 0;
    margin-right: 40px;
  }

  .info_main > .info > span{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #8E8E8E;
  }

  .info_main > .info > p{
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1F1F1F;
  }
</style>